<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>css笔记 | 个人笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-expandable-chapters-interactive/expandable-chapters.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../../md/js/js基础.html" />
    
    
    <link rel="prev" href="../../md/html/HTML5.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="2"
        data-chapter-title="css笔记"
        data-filepath="md/css/CSS笔记.md"
        data-basepath="../.."
        data-revision="Fri Sep 14 2018 16:41:08 GMT+0800 (中国标准时间)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" data-path="md/html/HTML5.html">
            
                
                    <a href="../../md/html/HTML5.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        HTML介绍
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="2" data-path="md/css/CSS笔记.html">
            
                
                    <a href="../../md/css/CSS笔记.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        css笔记
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3" data-path="md/js/js基础.html">
            
                
                    <a href="../../md/js/js基础.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        JavaScript
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.1" data-path="md/js/js数据类型的转换.html">
            
                
                    <a href="../../md/js/js数据类型的转换.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        数据类型
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2" data-path="md/js/js运算符.html">
            
                
                    <a href="../../md/js/js运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        运算符
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.2.1" data-path="md/js/js赋值运算符.html">
            
                
                    <a href="../../md/js/js赋值运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.1.</b>
                        
                        赋值运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.2" data-path="md/js/js比较运算符.html">
            
                
                    <a href="../../md/js/js比较运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.2.</b>
                        
                        比较运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.3" data-path="md/js/js逻辑操作符.html">
            
                
                    <a href="../../md/js/js逻辑操作符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.3.</b>
                        
                        逻辑操作符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.4" data-path="md/js/js条件运算符.html">
            
                
                    <a href="../../md/js/js条件运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.4.</b>
                        
                        条件运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.5" data-path="md/js/js位运算符.html">
            
                
                    <a href="../../md/js/js位运算符.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.5.</b>
                        
                        位运算符
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.2.6" data-path="md/js/js条件语句.html">
            
                
                    <a href="../../md/js/js条件语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.6.</b>
                        
                        条件语句
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.3" data-path="md/js/js循环.html">
            
                
                    <a href="../../md/js/js循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        循环
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.3.1" data-path="md/js/jswhile循环.html">
            
                
                    <a href="../../md/js/jswhile循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.1.</b>
                        
                        while循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3.2" data-path="md/js/jsfor循环.html">
            
                
                    <a href="../../md/js/jsfor循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.2.</b>
                        
                        for循环
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.3.3" data-path="md/js/js多层循环.html">
            
                
                    <a href="../../md/js/js多层循环.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.3.</b>
                        
                        多层循环
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.4" data-path="md/js/js函数.html">
            
                
                    <a href="../../md/js/js函数.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        函数
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.5" data-path="md/js/js冒泡排序.html">
            
                
                    <a href="../../md/js/js冒泡排序.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        冒泡排序
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.6" data-path="md/js/try-catch语句.html">
            
                
                    <a href="../../md/js/try-catch语句.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        try-catch语句
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="3.7" data-path="md/js/jses6.html">
            
                
                    <a href="../../md/js/jses6.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        es6
                    </a>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="3.7.1" data-path="md/js/安装babel.html">
            
                
                    <a href="../../md/js/安装babel.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.1.</b>
                        
                        安装babel(es6转es5)
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="3.8" data-path="md/js/js数组对象.html">
            
                
                    <a href="../../md/js/js数组对象.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>3.8.</b>
                        
                        数组对象
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="4" data-path="md/js/js笔记.html">
            
                
                    <a href="../../md/js/js笔记.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        js大佬de笔记
                    </a>
            
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../" >个人笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="css3">CSS3</h1>
<h3 id="&#x7B2C;&#x4E00;&#x8282;-&#x7B80;&#x5355;&#x4E86;&#x89E3;css3">&#x7B2C;&#x4E00;&#x8282; &#x7B80;&#x5355;&#x4E86;&#x89E3;CSS3</h3>
<ul>
<li>&#x5C42;&#x53E0;&#x6837;&#x5F0F;&#x8868;   </li>
<li>CSS&#x7684;&#x4F5C;&#x7528;&#x4E3B;&#x8981;&#x662F;&#x7528;&#x6765;&#x7F8E;&#x5316;&#x9875;&#x9762;&#xFF0C;&#x6BD4;&#x5982;&#x8BBE;&#x7F6E;&#x5B57;&#x4F53;&#x5927;&#x5C0F;&#x3001;&#x989C;&#x8272;&#x3001;&#x5BBD;&#x9AD8;&#x3001;&#x80CC;&#x666F;&#x3001;&#x8FB9;&#x6846;&#x3001;&#x4F4D;&#x7F6E;&#x3002;  </li>
<li>CSS&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x662F;&#x952E;&#x503C;&#x5BF9;&#x7684;&#x5F62;&#x5F0F;&#x624D;&#xFF0C;&#x5404;&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;&#x4E4B;&#x95F4;&#x76F4;&#x63A5;&#x7528;&#x5206;&#x53F7;&#x5206;&#x5272;.  <h4 id="11-&#x5F15;&#x5165;css&#x6837;&#x5F0F;">1.1 &#x5F15;&#x5165;CSS&#x6837;&#x5F0F;</h4>
1.&#x884C;&#x5185;&#x6837;&#x5F0F;&#xFF08;&#x901A;&#x8FC7;style&#x5C5E;&#x6027;&#x4E66;&#x5199;CSS&#x6837;&#x5F0F;&#xFF09;  <pre><code>&lt;p style=&quot;color: red; font-size: 25px;&quot;&gt;BGG&#x795E;&#x6559;&#xFF0C;&#x4E00;&#x7EDF;&#x6C5F;&#x6E56;&lt;/p&gt;
</code></pre>2.&#x9875;&#x5185;&#x6837;&#x5F0F;&#xFF08;&#x901A;&#x8FC7;style&#x6807;&#x7B7E;&#xFF09;  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
          p{
              font-weight: 900;
              /* background: greenyellow;*/
               color: blue;
          }
      &lt;/style&gt;
</code></pre>3.&#x5916;&#x90E8;&#x5F15;&#x5165;&#xFF08;link&#x6807;&#x7B7E;&#x5916;&#x90E8;&#x5F15;&#x5165;CSS&#x6587;&#x4EF6;&#xFF09;  <pre><code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot; /&gt;
</code></pre></li>
<li>&#x4E09;&#x79CD;&#x5F15;&#x5165;&#x7684;&#x4F18;&#x5148;&#x7EA7;&#xFF08;&#x5C31;&#x8FD1;&#x539F;&#x5219;&#xFF09;&#xFF1A;&#x884C;&#x5185;&#x6837;&#x5F0F; &gt; &#x9875;&#x5185;&#x5F15;&#x5165; &gt; &#x5916;&#x90E8;&#x5F15;&#x5165;      <h6 id="&#x901A;&#x8FC7;class&#x7C7B;&#x540D;&#x62FF;&#x5230;html&#x7ED3;&#x6784;&#xFF0C;&#x65B9;&#x5F0F;&#x662F;---&#x7C7B;&#x540D;">&#x901A;&#x8FC7;class&#x7C7B;&#x540D;&#x62FF;&#x5230;HTML&#x7ED3;&#x6784;&#xFF0C;&#x65B9;&#x5F0F;&#x662F;   .&#x7C7B;&#x540D;{}</h6>
<h4 id="12textalign">1.2text-align</h4>
<pre><code>left&#xFF1A;&#x5185;&#x5BB9;&#x5DE6;&#x5BF9;&#x9F50;&#x3002;
center&#xFF1A;&#x5185;&#x5BB9;&#x5C45;&#x4E2D;&#x5BF9;&#x9F50;&#x3002;
right&#xFF1A;&#x5185;&#x5BB9;&#x53F3;&#x5BF9;&#x9F50;&#x3002;
justify&#xFF1A;&#x5185;&#x5BB9;&#x4E24;&#x7AEF;&#x5BF9;&#x9F50;&#xFF0C;&#x4F46;&#x5BF9;&#x4E8E;&#x5F3A;&#x5236;&#x6253;&#x65AD;&#x7684;&#x884C;&#xFF08;&#x88AB;&#x6253;&#x65AD;&#x7684;&#x8FD9;&#x4E00;&#x884C;&#xFF09;&#x53CA;&#x6700;&#x540E;&#x4E00;&#x884C;&#xFF08;&#x5305;&#x62EC;&#x4EC5;&#x6709;&#x4E00;&#x884C;&#x6587;&#x672C;&#x7684;&#x60C5;&#x51B5;&#xFF0C;&#x56E0;&#x4E3A;&#x5B83;&#x65E2;&#x662F;&#x7B2C;&#x4E00;&#x884C;&#x4E5F;&#x662F;&#x6700;&#x540E;&#x4E00;&#x884C;&#xFF09;&#x4E0D;&#x505A;&#x5904;&#x7406;&#x3002;&#xFF08;CSS3&#xFF09;
start&#xFF1A;&#x5185;&#x5BB9;&#x5BF9;&#x9F50;&#x5F00;&#x59CB;&#x8FB9;&#x754C;&#x3002;&#xFF08;CSS3&#xFF09;
end&#xFF1A;&#x5185;&#x5BB9;&#x5BF9;&#x9F50;&#x7ED3;&#x675F;&#x8FB9;&#x754C;&#x3002;&#xFF08;CSS3&#xFF09;
match-parent&#xFF1A;&#x8FD9;&#x4E2A;&#x503C;&#x548C; inherit &#x8868;&#x73B0;&#x4E00;&#x81F4;&#xFF0C;&#x53EA;&#x662F;&#x8BE5;&#x503C;&#x7EE7;&#x627F;&#x7684; start &#x6216; end &#x5173;&#x952E;&#x5B57;&#x662F;&#x9488;&#x5BF9;&#x7236;&#x6BCD;&#x7684; &lt;&apos; direction &apos;&gt; &#x503C;&#x5E76;&#x8BA1;&#x7B97;&#x7684;&#xFF0C;&#x8BA1;&#x7B97;&#x503C;&#x53EF;&#x4EE5;&#x662F; left &#x548C; right &#x3002;&#xFF08;CSS3&#xFF09;
justify-all&#xFF1A;&#x6548;&#x679C;&#x7B49;&#x540C;&#x4E8E; justify&#xFF0C;&#x4F46;&#x8FD8;&#x4F1A;&#x8BA9;&#x6700;&#x540E;&#x4E00;&#x884C;&#x4E5F;&#x4E24;&#x7AEF;&#x5BF9;&#x9F50;&#x3002;&#xFF08;CSS3&#xFF09;
</code></pre></li>
</ul>
<h4 id="13-&#x989C;&#x8272;">1.3 &#x989C;&#x8272;</h4>
<h6 id="&#x989C;&#x8272;&#x7684;&#x8868;&#x793A;&#x65B9;&#x6CD5;&#xFF1A;">&#x989C;&#x8272;&#x7684;&#x8868;&#x793A;&#x65B9;&#x6CD5;&#xFF1A;</h6>
<pre><code>  1.&#x82F1;&#x6587;&#x5355;&#x8BCD;  
  2.&#x5341;&#x516D;&#x8FDB;&#x5236;&#x8868;&#x793A;&#x65B9;&#x6CD5;  
  3.rgb()/rgba() a&#x8868;&#x793A;&#x4E0D;&#x900F;&#x660E;&#x5EA6;    
</code></pre><h4 id="14-font">1.4 font</h4>
<pre><code>&lt;&apos; font-style &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x6587;&#x672C;&#x5B57;&#x4F53;&#x6837;&#x5F0F;
&lt;&apos; font-variant &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x6587;&#x672C;&#x662F;&#x5426;&#x4E3A;&#x5C0F;&#x578B;&#x7684;&#x5927;&#x5199;&#x5B57;&#x6BCD;
&lt;&apos; font-weight &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x6587;&#x672C;&#x5B57;&#x4F53;&#x7684;&#x7C97;&#x7EC6;
&lt;&apos; font-size &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x6587;&#x672C;&#x5B57;&#x4F53;&#x5C3A;&#x5BF8;
&lt;&apos; line-height &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x6587;&#x672C;&#x5B57;&#x4F53;&#x7684;&#x884C;&#x9AD8;
&lt;&apos; font-family &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x6587;&#x672C;&#x4F7F;&#x7528;&#x67D0;&#x4E2A;&#x5B57;&#x4F53;&#x6216;&#x5B57;&#x4F53;&#x5E8F;&#x5217;
caption&#xFF1A;&#x4F7F;&#x7528;&#x6709;&#x6807;&#x9898;&#x7684;&#x7CFB;&#x7EDF;&#x63A7;&#x4EF6;&#x7684;&#x6587;&#x672C;&#x5B57;&#x4F53;&#xFF08;&#x5982;&#x6309;&#x94AE;&#xFF0C;&#x83DC;&#x5355;&#x7B49;&#xFF09;&#xFF08;CSS2&#xFF09;
icon&#xFF1A;&#x4F7F;&#x7528;&#x56FE;&#x6807;&#x6807;&#x7B7E;&#x7684;&#x5B57;&#x4F53;&#xFF08;CSS2&#xFF09;
menu&#xFF1A;&#x4F7F;&#x7528;&#x83DC;&#x5355;&#x7684;&#x5B57;&#x4F53;&#xFF08;CSS2&#xFF09;
message-box&#xFF1A;&#x4F7F;&#x7528;&#x4FE1;&#x606F;&#x5BF9;&#x8BDD;&#x6846;&#x7684;&#x6587;&#x672C;&#x5B57;&#x4F53;&#xFF08;CSS2&#xFF09;
small-caption&#xFF1A;&#x4F7F;&#x7528;&#x5C0F;&#x63A7;&#x4EF6;&#x7684;&#x5B57;&#x4F53;&#xFF08;CSS2&#xFF09;
status-bar&#xFF1A;&#x4F7F;&#x7528;&#x7A97;&#x53E3;&#x72B6;&#x6001;&#x680F;&#x7684;&#x5B57;&#x4F53;&#xFF08;CSS2&#xFF09;
</code></pre><h4 id="15-background">1.5 background</h4>
<h6 id="&#x53D6;&#x503C;&#xFF1A;">&#x53D6;&#x503C;&#xFF1A;</h6>
<ul>
<li>&lt;&apos; background-image &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x3002;&#x53EF;&#x4EE5;&#x662F;&#x771F;&#x5B9E;&#x56FE;&#x7247;&#x8DEF;&#x5F84;&#x6216;&#x4F7F;&#x7528;&#x6E10;&#x53D8;&#x521B;&#x5EFA;&#x7684;&#x201C;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x201D;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);</code></li>
<li>&lt;&apos; background-position &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x4F4D;&#x7F6E;&#x3002;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-repeat:no-repeat,no-repeat,no-repeat;</code>  </li>
<li>&lt;&apos; background-size &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x7684;&#x5C3A;&#x5BF8;&#x5927;&#x5C0F;&#x3002;
&#x793A;&#x4F8B;&#xFF1A;<code>background-attachment:scroll,scroll,scroll;</code>  </li>
<li>&lt;&apos; background-repeat &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5982;&#x4F55;&#x94FA;&#x6392;&#x586B;&#x5145;&#x3002;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-position:10px 20px,10px 20px,10px 20px;</code>  </li>
<li>&lt;&apos; background-attachment &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x662F;&#x968F;&#x5BF9;&#x8C61;&#x5185;&#x5BB9;&#x6EDA;&#x52A8;&#x8FD8;&#x662F;&#x56FA;&#x5B9A;&#x7684;&#x3002;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-size:50px 60px,70px 90px,110px 130px;</code>  </li>
<li>&lt;&apos; background-origin &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x663E;&#x793A;&#x7684;&#x539F;&#x70B9;&#x3002;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-origin:content-box,content-box,content-box;</code>  </li>
<li>&lt;&apos; background-clip &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x5411;&#x5916;&#x88C1;&#x526A;&#x7684;&#x533A;&#x57DF;&#x3002;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-clip:padding-box,padding-box,padding-box;</code>  </li>
<li>&lt;&apos; background-color &apos;&gt;&#xFF1A;&#x6307;&#x5B9A;&#x5BF9;&#x8C61;&#x7684;&#x80CC;&#x666F;&#x989C;&#x8272;&#x3002;<br>&#x793A;&#x4F8B;&#xFF1A;<code>background-color:#aaa;</code>  </li>
<li>&#x591A;&#x5C42;&#x80CC;&#x666F;<pre><code>background:
   url(../img/QQ&#x56FE;&#x7247;20170904122139.png)
   no-repeat 10px/contain, #F0FFFF
  ;
</code></pre></li>
<li>&#x586B;&#x5145;&#x900F;&#x660E; <code>-webkit-text-fill-color: transparent;</code><h4 id="16-&#x9009;&#x62E9;&#x5668;">1.6 &#x9009;&#x62E9;&#x5668;</h4>
<h6 id="&#x9009;&#x62E9;&#x7B26;&#x79CD;&#x7C7B;">&#x9009;&#x62E9;&#x7B26;&#x79CD;&#x7C7B;</h6>
</li>
<li>&#x5143;&#x7D20;&#x9009;&#x62E9;&#x5668;&#x3000;<code>p{},div{}</code></li>
<li>&#x7C7B;&#x540D;&#x9009;&#x62E9;&#x5668; <code>.className{}</code></li>
<li>&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x5668;&#xFF1A;  <pre><code>    a: &#x5B50;&#x5B59;&#x9009;&#x62E9;&#x5668; (babaSelctor children{})  
    b: &#x5B50;&#x9009;&#x62E9;&#x5668;(&gt; &#x53EA;&#x80FD;&#x9009;&#x62E9;&#x5230;&#x513F;&#x5B50;&#x7EA7;&#x522B;)  
     c.&#x5144;&#x5F1F;&#x9009;&#x62E9;&#x5668; (~)`(&#x8FD9;&#x91CC;&#x7684;&#x5144;&#x5F1F;&#x662F;&#x6307;&#x5411;&#x4E0B;&#x627E;&#x5230;&#x7684;&#x5144;&#x5F1F;) `    
           d.&#x76F8;&#x90BB;&#x9009;&#x62E9;&#x5668;&#xFF08;+&#xFF09;  
</code></pre></li>
<li>4.&#x7EDF;&#x914D;&#x9009;&#x62E9;&#x5668;  &#xFF08;  *&#xFF09;  </li>
<li>5.&#x7FA4;&#x7EC4;&#x9009;&#x62E9;&#x5668;&#xFF08;&#xFF0C;&#xFF09;  <h3 id="&#x7B2C;&#x4E8C;&#x8282;-&#x8FB9;&#x6846;&#x3001;&#x76D2;&#x5B50;&#x6A21;&#x578B;">&#x7B2C;&#x4E8C;&#x8282; &#x8FB9;&#x6846;&#x3001;&#x76D2;&#x5B50;&#x6A21;&#x578B;</h3>
<h4 id="21-&#x8FB9;&#x6846;-border">2.1 &#x8FB9;&#x6846; border</h4>
```html
border&#xFF1A;<line-width> || <line-style> || <color>
border:1px solid  red</color></line-style></line-width></li>
</ul>
<!--
<line-width>：设置或检索对象边框宽度。
<line-style>：设置或检索对象边框样式。
<color>：设置或检索对象边框颜色。
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed |solid | double | groove | ridge | inset | outset
-->
<pre><code>&#x8FB9;&#x6846;&#x7684;&#x5E94;&#x7528;
```html
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt; 

    .border{ 
    float:left; 
    border-width:100px; 
    border-style:solid; 
    border-left-color:red; 
    border-right-color:blue; 
    border-top-color:green; 
    border-bottom-color:#666 
}  
&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

&lt;span class=&quot;border&quot;&gt;&lt;/span&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><p>&#x6548;&#x679C;&#x5982;&#x4E0B;&#xFF1A;
&lt;!DOCTYPE html&gt;</p>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> 
    .border{ 
    float:left; 
    border-width:100px; 
    border-style:solid; 
    border-left-color:red; 
    border-right-color:blue; 
    border-top-color:green; 
    border-bottom-color:#666 
    }  
    </style>
    </head>
    <body>

<span class="border"></span>
    </body>
</html>



<h4 id="22&#x76D2;&#x5B50;&#x6A21;&#x578B;">2.2&#x76D2;&#x5B50;&#x6A21;&#x578B;</h4>
<h6 id="i&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x7684;&#x5BBD;&#x9AD8;&#x8868;&#x793A;&#x7684;&#x662F;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x9AD8;&#xFF08;width&#xFF0C;height&#xFF09;&#xFF0C;&#x4E0D;&#x5305;&#x62EC;&#x8FB9;&#x6846;&#xFF0C;&#x4E0D;&#x5305;&#x62EC;padding&#xFF0C;&#x4E5F;&#x4E0D;&#x5305;&#x62EC;margin&#x3002;">I.&#x76D2;&#x5B50;&#x6A21;&#x578B;&#x7684;&#x5BBD;&#x9AD8;&#x8868;&#x793A;&#x7684;&#x662F;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x9AD8;&#xFF08;width&#xFF0C;height&#xFF09;&#xFF0C;&#x4E0D;&#x5305;&#x62EC;&#x8FB9;&#x6846;&#xFF0C;&#x4E0D;&#x5305;&#x62EC;padding&#xFF0C;&#x4E5F;&#x4E0D;&#x5305;&#x62EC;margin&#x3002;</h6>
<h6 id="ii&#x76D2;&#x5B50;&#x6700;&#x7EC8;&#x5360;&#x7528;&#x9762;&#x79EF;&#x5927;&#x5C0F;&#x662F;&#x5185;&#x5BB9;&#x90E8;&#x5206;&#x5185;&#x8FB9;&#x8DDD;&#x8FB9;&#x6846;&#x5916;&#x8FB9;&#x8DDD;">II.&#x76D2;&#x5B50;&#x6700;&#x7EC8;&#x5360;&#x7528;&#x9762;&#x79EF;&#x5927;&#x5C0F;&#x662F;:&#x5185;&#x5BB9;&#x90E8;&#x5206;+&#x5185;&#x8FB9;&#x8DDD;+&#x8FB9;&#x6846;+&#x5916;&#x8FB9;&#x8DDD;</h6>
<h5 id="221-&#x5916;&#x8FB9;&#x6846;-margin">2.2.1 &#x5916;&#x8FB9;&#x6846; margin</h5>
<h6 id="margin-&#x5916;&#x8FB9;&#x8DDD;">margin: &#x5916;&#x8FB9;&#x8DDD;</h6>
<ul>
<li>&#x4E0A;&#xFF1A;top;</li>
<li>&#x4E0B;&#xFF1A;bottom;</li>
<li>&#x5DE6;&#xFF1A;left;</li>
<li>&#x53F3;&#xFF1A;right;</li>
<li>padding&#x540E;&#x9762;&#x56DB;&#x4E2A;&#x503C;&#xFF0C;&#x4F9D;&#x6B21;&#x4E3A;&#xFF1A;&#x4E0A;&#x53F3;&#x4E0B;&#x5DE6;&#xFF08;&#x4EE5;&#x5F00;&#x5934;&#x7684;&#x987A;&#x65F6;&#x9488;&#x987A;&#x5E8F;&#xFF09;
<code>margin: 5px 10px 15px 20px;</code> </li>
<li>margin&#x540E;&#x9762;&#x4E09;&#x4E2A;&#x503C;&#x8868;&#x793A;&#x4E0A;&#xFF0C;&#x5DE6;&#x53F3;&#xFF0C;&#x4E0B;
<code>margin: 5px 10px 15px;</code></li>
<li>margin&#x540E;&#x9762;&#x4E24;&#x4E2A;&#x503C;&#x8868;&#x793A;&#x4E0A;&#x4E0B;&#xFF0C;&#x5DE6;&#x53F3;
<code>margin: 5px 10px</code></li>
<li>margin&#x540E;&#x9762;&#x4E00;&#x4E2A;&#x503C;,&#x8868;&#x793A;&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;
<code>margin: 15px;</code></li>
<li>&#x67D0;&#x4E9B;&#x76F8;&#x90BB;&#x7684;margin&#x4F1A;&#x53D1;&#x751F;&#x5408;&#x5E76;&#xFF0C;&#x6211;&#x4EEC;&#x79F0;&#x4E4B;&#x4E3A;margin&#x6298;&#x53E0;&#xFF1A;<code>&#x4E0A;&#x4E0B;&#x65B9;&#x5411;&#x4E0A;margin&#x503C;&#x6709;&#x6298;&#x53E0;&#x73B0;&#x8C61;</code><h5 id="222-&#x5185;&#x8FB9;&#x8DDD;-padding">2.2.2 &#x5185;&#x8FB9;&#x8DDD; padding</h5>
<h6 id="padding&#x8868;&#x793A;&#x5185;&#x8FB9;&#x8DDD;&#xFF0C;&#x610F;&#x601D;&#x662F;&#x76D2;&#x5B50;&#x91CC;&#x9762;&#x7684;&#x5185;&#x5BB9;&#x8DDD;&#x79BB;&#x8FB9;&#x8DDD;&#x7684;&#x8DDD;&#x79BB;">padding&#x8868;&#x793A;&#x5185;&#x8FB9;&#x8DDD;&#xFF0C;&#x610F;&#x601D;&#x662F;&#x76D2;&#x5B50;&#x91CC;&#x9762;&#x7684;&#x5185;&#x5BB9;&#x8DDD;&#x79BB;&#x8FB9;&#x8DDD;&#x7684;&#x8DDD;&#x79BB;</h6>
</li>
<li>&#x4E0A;&#xFF1A;top;</li>
<li>&#x4E0B;&#xFF1A;bottom;</li>
<li>&#x5DE6;&#xFF1A;left;</li>
<li>&#x53F3;&#xFF1A;right;</li>
<li>padding&#x540E;&#x9762;&#x56DB;&#x4E2A;&#x503C;&#xFF0C;&#x4F9D;&#x6B21;&#x4E3A;&#xFF1A;&#x4E0A;&#x53F3;&#x4E0B;&#x5DE6;&#xFF08;&#x4EE5;&#x5F00;&#x5934;&#x7684;&#x987A;&#x65F6;&#x9488;&#x987A;&#x5E8F;&#xFF09;
<code>padding: 5px 10px 15px 20px;</code></li>
<li>padding&#x540E;&#x9762;&#x4E09;&#x4E2A;&#x503C;&#x8868;&#x793A;&#x4E0A;&#xFF0C;&#x5DE6;&#x53F3;&#xFF0C;&#x4E0B;
<code>padding: 5px 10px 15px;</code></li>
<li>padding&#x540E;&#x9762;&#x4E24;&#x4E2A;&#x503C;&#x8868;&#x793A;&#x4E0A;&#x4E0B;&#xFF0C;&#x5DE6;&#x53F3;
<code>padding: 5px 10px;</code></li>
<li>padding&#x540E;&#x9762;&#x4E00;&#x4E2A;&#x503C;,&#x8868;&#x793A;&#x4E0A;&#x4E0B;&#x5DE6;&#x53F3;
<code>padding: 10px;</code><h5 id="223-&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x683C;&#x5F0F;&#x5316;&#x4E0A;&#x4E0B;&#x6587;bfc">2.2.3 &#x5757;&#x7EA7;&#x5143;&#x7D20;&#x683C;&#x5F0F;&#x5316;&#x4E0A;&#x4E0B;&#x6587;(BFC)</h5>
<pre><code class="lang-html"> overflow: hidden;
 border: 1px solid white;
</code></pre>
<blockquote>
<ul>
<li>&#x76D2;&#x5B50;&#x5C45;&#x4E2D;&#x8BBE;&#x7F6E;       <pre><code>       `margin: 0 auto; `   
</code></pre></li>
</ul>
</blockquote>
</li>
<li>&#x8D85;&#x51FA;&#x90E8;&#x5206;&#x9690;&#x85CF;<br>   <code>overflow: hidden;</code></li>
</ul>
<h3 id="&#x7B2C;&#x4E09;&#x8282;-&#x6D6E;&#x52A8;-float">&#x7B2C;&#x4E09;&#x8282; &#x6D6E;&#x52A8; float</h3>
<h4 id="&#x5982;&#x679C;&#x7ED9;&#x76D2;&#x5B50;&#x8BBE;&#x7F6E;&#x4E86;&#x6D6E;&#x52A8;&#xFF0C;&#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x4E3A;&#x628A;&#x76D2;&#x5B50;&#x8BBE;&#x7F6E;&#x4E3A;&#x5E26;&#x6709;&#x65B9;&#x5411;&#x7684;iinlineblock">&#x5982;&#x679C;&#x7ED9;&#x76D2;&#x5B50;&#x8BBE;&#x7F6E;&#x4E86;&#x6D6E;&#x52A8;&#xFF0C;&#x53EF;&#x4EE5;&#x7406;&#x89E3;&#x4E3A;&#x628A;&#x76D2;&#x5B50;&#x8BBE;&#x7F6E;&#x4E3A;&#x5E26;&#x6709;&#x65B9;&#x5411;&#x7684;iinline-block</h4>
<blockquote>
<p>&#x5207;&#x8BB0;&#xFF1A;&#x8BBE;&#x7F6E;&#x4E86;&#x6D6E;&#x52A8;&#x5143;&#x7D20;&#xFF0C;&#x4E00;&#x5B9A;&#x8981;&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#xFF01;&#xFF01;&#xFF01;<br>&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x65B9;&#x5F0F;&#xFF1A;<br>    1.&#x7ED9;&#x7238;&#x7238;&#x8BBE;&#x7F6E;<code>overflow&#xFF1A;hidden</code><br>    2.&#x5229;&#x7528;CSS3&#x7684;clear:(both)&#x5C5E;&#x6027;&#x6E05;&#x9664;&#x6D6E;&#x52A8;  <code>clear: both;</code><br>    3.&#x6E05;&#x9664;&#x6D6E;&#x52A8;&#x7684;&#x7B2C;&#x4E09;&#x79CD;&#x65B9;&#x6CD5;
<code>.clear::after{  
    content: &quot;&quot;;      
    display: block;      
    width: 0;     
    height: 0;     
    clear: both;  
}</code></p>
</blockquote>
<h3 id="&#x7B2C;&#x56DB;&#x8282;-label">&#x7B2C;&#x56DB;&#x8282; label</h3>
<p>4.1 &#x6574;&#x4E2A;<label></label>&#x7C98;&#x8D34;&#x5230;&#x9875;&#x9762;&#x4EFB;&#x4F55;&#x5730;&#x65B9;&#x90FD;&#x53EF;&#x4EE5;&#x5448;&#x73B0;&#x5E26;&#x7BAD;&#x5934;&#x7684;&#x6807;&#x7B7E;&#x6548;&#x679C;&#x3002;</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt; 
    .label{position:relative; display:inline-block; background:#0a9; font-size:12px; margin-right:10px} 
    .label a{color:#fff; display:inline-block; padding:3px 6px; text-decoration:none} 
    .label-arrow{position:absolute; border:4px solid rgba(0,0,0,0); height:0; line-height:0; font-size:0} 
    .label-arrow-l{top:6px; left:-8px; border-right-color:#0a9} 
    .label-arrow-r{top:6px; right:-8px; border-left-color:#0a9} 
    .label-arrow-t{top:-8px; left:50%; margin-left:-4px; border-bottom-color:#0a9} 
    .label-arrow-b{bottom:-8px; left:50%; margin-left:-4px; border-top-color:#0a9} 
&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

&lt;label class=&quot;label&quot;&gt; 
    &lt;a href=&quot;http://www.exp99.com/f2e/&quot;&gt;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&lt;/a&gt; 
    &lt;i class=&quot;label-arrow label-arrow-l&quot;&gt;&lt;/i&gt; 
&lt;/label&gt; 
&lt;label class=&quot;label&quot;&gt; 
    &lt;a href=&quot;http://www.exp99.com/htmlcss/&quot;&gt;HTML+CSS&lt;/a&gt; 
    &lt;i class=&quot;label-arrow label-arrow-r&quot;&gt;&lt;/i&gt; 
&lt;/label&gt; 
&lt;label class=&quot;label&quot;&gt; 
    &lt;a href=&quot;http://www.exp99.com/yunwei/&quot;&gt;&#x7F51;&#x7AD9;&#x8FD0;&#x7EF4;&lt;/a&gt; 
    &lt;i class=&quot;label-arrow label-arrow-t&quot;&gt;&lt;/i&gt; 
&lt;/label&gt; 
&lt;label class=&quot;label&quot;&gt; 
    &lt;a href=&quot;http://www.exp99.com/dedecms/&quot;&gt;&#x7EC7;&#x68A6;CMS&lt;/a&gt; 
    &lt;i class=&quot;label-arrow label-arrow-b&quot;&gt;&lt;/i&gt; 
&lt;/label&gt; 
    &lt;/body&gt;
&lt;/html&gt;
</code></pre><p>&#x6548;&#x679C;&#x5982;&#x4E0B;&#xFF1A;
&lt;!DOCTYPE html&gt;</p>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css"> 
    .label{position:relative; display:inline-block; background:#0a9; font-size:12px; margin-right:10px} 
    .label a{color:#fff; display:inline-block; padding:3px 6px; text-decoration:none} 
    .label-arrow{position:absolute; border:4px solid rgba(0,0,0,0); height:0; line-height:0; font-size:0} 
    .label-arrow-l{top:6px; left:-8px; border-right-color:#0a9} 
    .label-arrow-r{top:6px; right:-8px; border-left-color:#0a9} 
    .label-arrow-t{top:-8px; left:50%; margin-left:-4px; border-bottom-color:#0a9} 
    .label-arrow-b{bottom:-8px; left:50%; margin-left:-4px; border-top-color:#0a9} 
</style>
    </head>
    <body>

<label class="label"> 
    <a href="http://www.exp99.com/f2e/" target="_blank">&#x524D;&#x7AEF;&#x5F00;&#x53D1;</a> 
    <i class="label-arrow label-arrow-l"></i> 
</label> 
<label class="label"> 
    <a href="http://www.exp99.com/htmlcss/" target="_blank">HTML+CSS</a> 
    <i class="label-arrow label-arrow-r"></i> 
</label> 
<label class="label"> 
    <a href="http://www.exp99.com/yunwei/" target="_blank">&#x7F51;&#x7AD9;&#x8FD0;&#x7EF4;</a> 
    <i class="label-arrow label-arrow-t"></i> 
</label> 
<label class="label"> 
    <a href="http://www.exp99.com/dedecms/" target="_blank">&#x7EC7;&#x68A6;CMS</a> 
    <i class="label-arrow label-arrow-b"></i> 
</label> 
    </body>
</html>

<h5 id="42-&#x56FE;&#x7247;&#x5C45;&#x4E2D;">4.2 &#x56FE;&#x7247;&#x5C45;&#x4E2D;</h5>
<p><code>vertical-align: middle;</code></p>
<h5 id="43-&#x753B;&#x5706;">4.3 &#x753B;&#x5706;</h5>
<pre><code class="lang-html">div{
    width: 200px;
    height: 200px;
    background: burlywood;
    border-radius:50%;
    overflow: hidden;
}
/*img{
    width: 100%;
}*/
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">&quot;img/denglu_03.jpg&quot;</span>/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
</code></pre>
<h5 id="44-&#x7ED8;&#x5236;&#x4E09;&#x89D2;&#x5F62;&#x7684;&#x6B65;&#x9AA4;&#xFF1A;">4.4 &#x7ED8;&#x5236;&#x4E09;&#x89D2;&#x5F62;&#x7684;&#x6B65;&#x9AA4;&#xFF1A;</h5>
<blockquote>
<p> 1.&#x753B;&#x4E00;&#x4E2A;&#x77E9;&#x5F62;&#x5373;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;div&#x628A;div&#x7684;&#x5BBD;&#x9AD8;&#x8BBE;&#x4E3A;0,&#xFF1B;<br>   2.&#x7ED9;&#x4E0A;&#x8FF0;&#x7684;div&#x8BBE;&#x7F6E;&#x8FB9;&#x6846;&#xFF0C;&#x8FB9;&#x6846;&#x539A;&#x5EA6;&#x51B3;&#x5B9A;&#x4E86;&#x4E09;&#x89D2;&#x5F62;&#x7684;&#x5927;&#x5C0F;<br>   3.&#x628A;&#x6240;&#x9700;&#x8981;&#x7684;&#x4E09;&#x89D2;&#x5F62;&#x989C;&#x8272;&#x4FDD;&#x7559;&#xFF0C;&#x5176;&#x4F59;&#x4E09;&#x89D2;&#x5F62;&#x8FB9;&#x6846;&#x989C;&#x8272;&#x8BBE;&#x7F6E;&#x900F;&#x660E;&#x8272;&#xFF08;transparent) 
   4.&#x628A;&#x6240;&#x9700;&#x4E09;&#x89D2;&#x5F62;&#x5BF9;&#x9762;&#x7684;&#x8FB9;&#x6846;&#x53BB;&#x9664;&#xFF08;&#x8FD9;&#x4E00;&#x6B65;&#x4E0D;&#x662F;&#x5FC5;&#x987B;&#x7684;&#xFF09;     </p>
<pre><code class="lang-html">.indexweb .triangle{
                margin: 0 auto;
                width: 0px;
                height: 0px;
                border-left: 30px solid darkblue;
                border-top: 30px solid yellow;
                border-right: 30px solid red;
                border-bottom: 30px solid rosybrown;
            }
.indexweb .r_triangle{
                width: 0px;
                height: 0px;
                border-bottom:20px solid transparent ;
                border-top:20px solid transparent ;
                /*border-left:30px solid transparent ;*/
                border-right:32px solid red ;
}
</code></pre>
<h4 id="&#x7B2C;&#x4E94;&#x8282;-&#x5B9A;&#x4F4D;-position&#x503C;">&#x7B2C;&#x4E94;&#x8282; &#x5B9A;&#x4F4D; position&#x503C;</h4>
<h5 id="51-relative-&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x76F8;&#x5BF9;&#x7684;&#x662F;&#x5143;&#x7D20;&#x672C;&#x8EAB;&#x8BE5;&#x5728;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x6CE8;&#x610F;&#xFF1A;">5.1 relative &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x76F8;&#x5BF9;&#x7684;&#x662F;&#x5143;&#x7D20;&#x672C;&#x8EAB;&#x8BE5;&#x5728;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x6CE8;&#x610F;&#xFF1A;</h5>
<p><code>&#x867D;&#x7136;&#x901A;&#x8FC7;top&#xFF0C;left&#xFF0C;right&#xFF0C;bottom&#x6539;&#x53D8;&#x4E86;&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x4F46;&#x6539;&#x5143;&#x7D20;&#x672C;&#x6765;&#x6240;&#x5728;&#x4F4D;&#x7F6E;&#x4F9D;&#x7136;&#x4FDD;&#x7559;</code></p>
<ul>
<li>absolute &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#xFF0C;&#x4ED6;&#x7684;&#x5B9A;&#x4F4D;&#x662F;&#x76F8;&#x5BF9;&#x4E8E;&#x7B2C;&#x4E00;&#x4E2A;&#x5177;&#x6709;&#x5B9A;&#x4F4D;&#x4FE1;&#x606F;&#x7684;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#xFF0C;&#x8BE5;&#x5143;&#x7D20;&#x8131;&#x79BB;&#x4E86;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x672C;&#x6765;&#x7684;&#x4F4D;&#x7F6E;&#x5DF2;&#x7ECF;&#x4E0D;&#x5B58;&#x5728;&#xFF0C;&#x5B8C;&#x5168;&#x901A;&#x8FC7;&#x5B9A;&#x4F4D;&#x5C5E;&#x6027;&#x51B3;&#x5B9A;&#x4F4D;&#x7F6E;&#x3002;</li>
<li>fixed  &#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#xFF0C;&#x4F46;&#x4ED6;&#x7684;&#x5B9A;&#x4F4D;&#x662F;&#x57FA;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x5DE6;&#x4E0A;&#x89D2;&#xFF0C;&#x540C;&#x6837;&#x4E5F;&#x8131;&#x79BB;&#x6587;&#x6863;&#x6D41;
&#x901A;&#x8FC7;z-index&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x6539;&#x53D8;&#x5C42;&#x7EA7;&#x5173;&#x7CFB;&#xFF0C;&#x5373;&#x8C03;&#x6574;&#x4E0A;&#x4E0B;&#x5C42;&#x6B21;&#xFF0C;&#x5982;&#x679C;&#x8BBE;&#x4E3A;&#x8D1F;&#x503C;&#xFF0C;&#x90A3;&#x4E48;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x5C42;&#x7EA7;&#x5173;&#x7CFB;&#x4F4E;&#x4E8E;&#x4E86;&#x7236;&#x5143;&#x7D20;&#x7684;&#x80CC;&#x666F;&#x5C42;&#x3002;<br>eft&#xFF0C;top&#xFF0C;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x767E;&#x5206;&#x6BD4;&#xFF0C;&#x5206;&#x522B;&#x662F;&#x57FA;&#x4E8E;&#x7236;&#x5143;&#x7D20;&#x7684;&#x5BBD;/&#x9AD8;&#x3002;</li>
</ul>
</blockquote>
<h5 id="52-&#x6587;&#x6863;&#x5B9A;&#x4F4D;&#x5206;&#x4E09;&#x79CD;&#xFF1A;">5.2 &#x6587;&#x6863;&#x5B9A;&#x4F4D;&#x5206;&#x4E09;&#x79CD;&#xFF1A;</h5>
<ul>
<li>1.&#x666E;&#x901A;&#x6D41;&#xFF08;&#x4ECE;&#x4E0A;&#x5230;&#x4E0B;&#xFF09;</li>
<li>2.&#x6D6E;&#x52A8;&#x6D41;</li>
<li>3.&#x5B9A;&#x4F4D;
cmd&#x547D;&#x4EE4;&#x64CD;&#x4F5C;    </li>
<li>1.&#x901A;&#x8FC7;e: &#x8FDB;&#x5165;e&#x76D8;&#xFF08;&#x5207;&#x6362;&#x76D8;&#x7B26;&#xFF09;    </li>
<li>2.&#x901A;&#x8FC7; cd &#x547D;&#x4EE4;&#x8FDB;&#x5165;&#x5177;&#x4F53;&#x6587;&#x4EF6;&#x5939;<br>  <code>&#x5982;&#x679C;scss&#x6587;&#x4EF6;&#x540D;&#x524D;&#x9762;&#x6709;&#x4E0B;&#x5212;&#x7EBF;&#xFF0C;&#x4F8B;&#x5982;_reset.scss&#x5219;&#x6B64;&#x6587;&#x4EF6;&#x4E0D;&#x4F1A;&#x88AB;&#x7F16;&#x8BD1;</code></li>
</ul>
<h3 id="&#x7B2C;&#x516D;&#x8282;-&#x4F2A;&#x7C7B;-&#x4F2A;&#x5BF9;&#x8C61;">&#x7B2C;&#x516D;&#x8282; &#x4F2A;&#x7C7B; &#x4F2A;&#x5BF9;&#x8C61;</h3>
<h5 id="61-&#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;-">6.1 &#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668; (:)</h5>
<p> &#x4F2A;&#x7C7B;&#x9009;&#x62E9;&#x5668;   </p>
<ul>
<li><code>E:hover</code> &#x9009;&#x4E2D;&#x9F20;&#x6807;&#x60AC;&#x505C;&#x5728;&#x8BE5;&#x5143;&#x7D20;&#x65F6;&#x7684;&#x72B6;&#x6001;          </li>
<li><code>E:first-child</code>&#x9009;&#x4E2D;&#x7B2C;&#x4E00;&#x4E2A;&#x5143;&#x7D20;(&#x6CE8;&#x610F;:&#x5FC5;&#x987B;&#x540C;&#x65F6;&#x6EE1;&#x8DB3;&#x7B2C;&#x4E00;&#x4E2A;&#x548C;E&#x9009;&#x62E9;&#x5668;)   </li>
<li><code>E:nth-child(n)</code>&#x9009;&#x4E2D;&#x7B2C;n&#x4E2A;&#x5B69;&#x5B50;  </li>
<li><code>E:nth-of-type(n)</code> &#x6839;&#x636E;E&#x7C7B;&#x578B;&#x9009;&#x62E9;&#x7B2C;n&#x4E2A;&#x5B69;&#x5B50;</li>
<li><code>E:not(s)</code> &#x6240;&#x6709;E&#x9009;&#x62E9;&#x5668;&#x91CC;&#x9762;&#x6392;&#x9664;s&#x9009;&#x62E9;&#x5668;<h5 id="62-&#x4F2A;&#x5BF9;&#x8C61;&#x9009;&#x62E9;&#x5668;">6.2 &#x4F2A;&#x5BF9;&#x8C61;&#x9009;&#x62E9;&#x5668;(::)</h5>
</li>
<li><code>E::after</code> &#x5728;E&#x5185;&#x90E8;&#x7684;&#x6700;&#x540E;&#x8FFD;&#x52A0;&#x5185;&#x5BB9;</li>
<li><code>E::before</code>  &#x5728;E&#x5185;&#x90E8;&#x7684;&#x6700;&#x524D;&#x9762;&#x63D2;&#x5165;&#x5185;&#x5BB9;</li>
<li><code>E:first-letter/E::first-letter { sRules }</code>&#x8BBE;&#x7F6E;&#x5BF9;&#x8C61;&#x5185;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x7684;&#x6837;&#x5F0F;</li>
</ul>
<h3 id="&#x7B2C;&#x4E03;&#x8282;-&#x52A8;&#x753B;">&#x7B2C;&#x4E03;&#x8282; &#x52A8;&#x753B;</h3>
<h4 id="71-transform">7.1 transform</h4>
<p>transform  &#x53D8;&#x6362;</p>
<ul>
<li>1.<code>translate</code>  &#x4F4D;&#x79FB;</li>
<li>2.<code>totate</code> &#x65CB;&#x8F6C;</li>
<li>3.<code>skew</code> &#x659C;&#x5207;</li>
<li>4.<code>scale</code> &#x7F29;&#x653E;<h6 id="&#x6CE8;&#x610F;&#xFF1A;">&#x6CE8;&#x610F;&#xFF1A;</h6>
</li>
<li>1.&#x867D;&#x7136;&#x505A;&#x4E86;&#x53D8;&#x6362;&#x52A8;&#x4F5C;&#xFF0C;&#x4F46;&#x6539;&#x5143;&#x7D20;&#x7684;&#x5927;&#x5C0F;&#x6240;&#x5728;&#x4F4D;&#x7F6E;&#x90FD;&#x662F;&#x539F;&#x5148;&#x7684;&#x5F62;&#x6001;</li>
<li>2.<code>tranform</code>&#x64CD;&#x4F5C;&#x672C;&#x8D28;&#x4E0A;&#x662F;&#x5BF9;&#x5750;&#x6807;&#x7CFB;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x6240;&#x4EE5;&#x5148;&#x4F4D;&#x79FB;&#x540E;&#x65CB;&#x8F6C;&#x548C;&#x5148;&#x65CB;&#x8F6C;&#x540E;&#x4F4D;&#x79FB;&#x4F1A;&#x9020;&#x6210;&#x4E0D;&#x540C;&#x7684;&#x663E;&#x793A;&#x6548;&#x679C;<h4 id="72-&#x52A8;&#x753B;">7.2 &#x52A8;&#x753B;</h4>
CSS&#x52A8;&#x753B;&#x5206;&#x4E24;&#x79CD;:<br>1.&#x8FC7;&#x6E21;&#x52A8;&#x753B;;    <blockquote>
<p>&#x72B6;&#x6001;&#x53D1;&#x751F;&#x6539;&#x53D8;&#x662F;&#x5B9E;&#x73B0;&#x7684;&#x52A8;&#x753B;&#x6548;&#x679C;    </p>
</blockquote>
</li>
</ul>
<p>2.&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;      </p>
<h5 id="721-&#x8FC7;&#x6E21;&#x52A8;&#x753B;-transition">7.2.1 &#x8FC7;&#x6E21;&#x52A8;&#x753B; transition</h5>
<p>&#x5C5E;&#x6027;&#xFF1A;</p>
<ul>
<li>transition-property&#x6307;&#x5B9A;&#x8981;&#x8FDB;&#x884C;&#x52A8;&#x753B;&#x7684;CSS&#x5C5E;&#x6027;;
  <code>transition-property:width;</code></li>
<li>transition-duration&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x8981;&#x6267;&#x884C;&#x7684;&#x65F6;&#x95F4;
<code>transition-duration:2s;</code></li>
<li>transition-timing-function&#x6307;&#x5B9A;&#x4E86;&#x65F6;&#x95F4;&#x51FD;&#x6570;
<code>transition-timing-function:ease-in-out ;</code></li>
<li>transition-delay&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x5EF6;&#x8FDF;&#x65F6;&#x95F4;
<code>transition-delay: 1s;</code></li>
<li>transform-origin&#x6307;&#x5B9A;&#x53D8;&#x6362;&#x7684;&#x57FA;&#x70B9;
<code>transform-origin:left top;</code></li>
</ul>
<h3 id="&#x62D3;&#x5C55;">&#x62D3;&#x5C55;</h3>
<h5 id="&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;">&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;:</h5>
<ul>
<li>&#x6D4F;&#x89C8;&#x5668;&#x6700;&#x6838;&#x5FC3;&#x7684;&#x529F;&#x80FD;&#x6E32;&#x67D3;&#x5F15;&#x64CE;</li>
<li>&#x5404;&#x5927;&#x4E3B;&#x8981;&#x6D4F;&#x89C8;&#x5668;&#x6709;:IE,&#x8C37;&#x6B4C;,Safari,FireFox,&#x6B27;&#x670B;,QQ&#x6D4F;&#x89C8;&#x5668;,&#x730E;&#x8C79;.....</li>
<li>1.webkit&#x5185;&#x6838;  -webkit-: &#x8C37;&#x6B4C;&#xFF0C;&#x5B89;&#x5353;&#x624B;&#x673A;&#xFF0C;Safari&#xFF0C;QQ&#x7B49;&#x56FD;&#x5185;&#x4E00;&#x4E9B;&#x6D4F;&#x89C8;&#x5668;</li>
<li>2.trident&#x5185;&#x6838; -ms- IE&#x6D4F;&#x89C8;&#x5668;</li>
<li>3.Gecko&#x5185;&#x6838;   -moz- &#x706B;&#x72D0;&#x6D4F;&#x89C8;&#x5668;</li>
<li>4.Presto&#x5185;&#x6838;  -o-  &#x65E9;&#x671F;&#x7684;&#x6B27;&#x670B;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x6838;</li>
</ul>
<h5 id="722-&#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B;-animation">7.2.2 &#x81EA;&#x5B9A;&#x4E49;&#x52A8;&#x753B; animation</h5>
<p>&#x5C5E;&#x6027;&#xFF1A;</p>
<ul>
<li>animation-name&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x540D;&#x5B57;
<code>animation-name: myFirst;</code></li>
<li>animation-duration&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x6301;&#x7EED;&#x65F6;&#x95F4; 
<code>animation-duration:800ms ;</code></li>
<li>animation-timing-function&#x6307;&#x5B9A;&#x7535;&#x8BDD;&#x53F7;&#x7801;&#x65F6;&#x95F4;&#x51FD;&#x6570; 
<code>animation-timing-function:ease-in;</code></li>
<li>animation-delay&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x5EF6;&#x8FDF;&#x65F6;&#x95F4; 
<code>animation-delay: 1s;</code></li>
<li>animation-iteration-count&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x6267;&#x884C;&#x6B21;&#x6570; 
<code>animation-iteration-count: 3;</code></li>
<li>animation-direction&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x6267;&#x884C;&#x65B9;&#x5411;
<code>animation-direction: alternate;</code></li>
<li>animation-fill-mode&#x6307;&#x5B9A;&#x52A8;&#x753B;&#x7ED3;&#x675F;&#x540E;&#x505C;&#x6B62;&#x7684;&#x72B6;&#x6001; 
<code>animation-fill-mode: both;</code></li>
<li>animation-play-state&#x6307;&#x5B9A;&#x4E86;&#x52A8;&#x753B;&#x7684;&#x64AD;&#x653E;&#x72B6;&#x6001;,&#x5176;&#x4E2D;paused&#x6682;&#x505C;&#x52A8;&#x753B;&#x64AD;&#x653E;
<code>animation-play-state: paused;</code></li>
</ul>
<p>&#x6267;&#x884C;&#x52A8;&#x753B;&#x5C5E;&#x6027;</p>
<pre><code class="lang-html">@keyframes myFirst{
//                &#x5F00;&#x59CB;
                    from{
                        transform: scale(1);
                    }
//                    &#x7ED3;&#x675F;
                    to{
                        transform: scale(1.5);
                    }
                }
</code></pre>
<h4 id="73-git&#x7684;&#x4F7F;&#x7528;">7.3 git&#x7684;&#x4F7F;&#x7528;</h4>
<ul>
<li>1.&#x5728;&#x7801;&#x4E91;&#x4E0A;&#x65B0;&#x5EFA;&#x4E00;&#x4E2A;&#x9879;&#x76EE;&#xFF0C;&#x5E76;&#x590D;&#x5236;&#x9879;&#x76EE;&#x5730;&#x5740;&#xFF0C;&#x4F8B;&#x5982;<code>https://git.oschina.net/bluej_zjw/013test.git</code></li>
<li>2.&#x5728;&#x672C;&#x5730;&#x6587;&#x4EF6;&#x5939;&#x4E0B;&#x6267;&#x884C;&#x7EC8;&#x7AEF;&#x547D;&#x4EE4; <code>git clone</code>&lt;&#x9879;&#x76EE;&#x5730;&#x5740;&gt;</li>
<li>3.&#x5728;&#x672C;&#x5730;&#x751F;&#x6210;&#x7684;&#x9879;&#x76EE;&#x76EE;&#x5F55;&#x91CC;&#x9762;&#x4E66;&#x5199;&#x81EA;&#x5DF1;&#x7684;&#x4E1A;&#x52A1;&#x4EE3;&#x7801;</li>
<li>4.&#x8FDB;&#x5165;&#x9879;&#x76EE;&#x76EE;&#x5F55;&#xFF0C;&#x901A;&#x8FC7;&#x56DB;&#x6B65;&#x8D70;&#x4E0A;&#x4F20;&#x81EA;&#x5DF1;&#x7684;&#x4EE3;&#x7801;<br>   <code>git add ./</code><br>   <code>git commit -m &quot;&#x63D0;&#x4EA4;&#x8BF4;&#x660E;&quot;</code><br>  <code>git pull</code><br>  <code>git push</code><br>   <code>&#x5176;&#x4E2D;git add ./</code><br>   <code>git commit</code><br>   <code>git pull</code><br>   <code>git push</code>  </li>
</ul>
<h4 id="74&#x6E10;&#x53D8;">7.4&#x6E10;&#x53D8;</h4>
<h5 id="&#x6E10;&#x53D8;&#x5206;&#x4E24;&#x79CD;">&#x6E10;&#x53D8;&#x5206;&#x4E24;&#x79CD;:</h5>
<ul>
<li>1.&#x7EBF;&#x6027;&#x6E10;&#x53D8;</li>
<li>2.&#x653E;&#x5C04;&#x6027;&#x6E10;&#x53D8;
<code>background: radial-gradient(ellipse at 50% 80%, #ff0000,#ffff00);</code></li>
</ul>
<h3 id="&#x7B2C;&#x516B;&#x8282;-&#x5A92;&#x4F53;&#x67E5;&#x8BE2;--midiaquery">&#x7B2C;&#x516B;&#x8282; &#x5A92;&#x4F53;&#x67E5;&#x8BE2;  midiaQuery</h3>
<h4 id="81-&#x5A92;&#x4F53;&#x67E5;&#x8BE2;">8.1 &#x5A92;&#x4F53;&#x67E5;&#x8BE2;</h4>
<pre><code class="lang-html">@media  &#x5A92;&#x4F53;&#x7C7B;&#x578B; and &#xFF08;&#x5A92;&#x4F53;&#x5C5E;&#x6027;&#xFF09;{
       //&#x53EA;&#x6709;&#x6EE1;&#x8DB3;&#x7279;&#x5B9A;&#x7684;&#x5A92;&#x4F53;&#x67E5;&#x8BE2;&#x8981;&#x6C42;&#x624D;&#x80FD;&#x88AB;&#x5E94;&#x7528;
       //&#x6B63;&#x5E38;&#x7684;css&#x4EE3;&#x7801;
       //and &#x524D;&#x540E;&#x4E00;&#x5B9A;&#x8981;&#x6709;&#x7A7A;&#x683C;
   }
</code></pre>
<h5 id="812&#x54CD;&#x5E94;&#x5F0F;&#x5E03;&#x5C40;">8.1.2&#x54CD;&#x5E94;&#x5F0F;&#x5E03;&#x5C40;</h5>
<ul>
<li>1.&#x5A92;&#x4F53;&#x67E5;&#x8BE2;</li>
<li>2.&#x767E;&#x5206;&#x6BD4;</li>
<li>3 .&#x6D6E;&#x52A8;/inline-block  </li>
</ul>
<p><code>max-widht</code>&#x662F;&#x6700;&#x5927;&#x5BBD;&#x7684;&#x610F;&#x601D;&#xFF0C;&#x5373;&#x5C0F;&#x4E8E;&#x7B49;&#x4E8E;&#x8BBE;&#x5B9A;&#x503C;
<code>min-widht</code>&#x662F;&#x6700;&#x5C0F;&#x5BBD;&#x7684;&#x610F;&#x601D;&#xFF0C;&#x5373;&#x5927;&#x4E8E;&#x7B49;&#x4E8E;&#x8BBE;&#x5B9A;&#x503C;</p>
<blockquote>
<p>&#x8BBE;&#x5907;&#x5BBD;&#x5EA6;&#x503C;&#x5BF9;&#x5E94;&#x7684;&#x8BBE;&#x5907;<br>&#x5C0F;&#x4E8E;768 &#x624B;&#x673A;<br>768&#x2014;&#x2014;991 &#x5E73;&#x677F;<br>991&#x2014;&#x2014;1200 PC&#x7AEF;<br>1200 &#x8D85;&#x5927;&#x5C4F;&#x5E55;  </p>
</blockquote>
<h4 id="82-css&#x5185;&#x5BB9;&#x56DE;&#x987E;">8.2 css&#x5185;&#x5BB9;&#x56DE;&#x987E;</h4>
<pre><code>css&#x5185;&#x5BB9;&#x56DE;&#x987E;
               1.&#x9009;&#x62E9;&#x5668;
               2.&#x5B9A;&#x4F4D;
               3.&#x52A8;&#x753B;&#xFF08;transition/animation&#xFF09;
               4.&#x6D6E;&#x52A8;---&#x6E05;&#x6D6E;&#x52A8;&#xFF08;&#x666E;&#x901A;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x6D6E;&#x52A8;&#x6D41;&#xFF0C;absolute&#x5B9A;&#x4F4D;&#xFF09;
               5.&#x6E05;&#x6D6E;&#x52A8;&#x7684;&#x4E09;&#x79CD;&#x65B9;&#x5F0F;
               6.margin/padding
               7.&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF08;w3c&#x6807;&#x51C6;  IE&#x76D2;&#x5B50;&#x6A21;&#x578B;&#xFF09;
                          &#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x7EC4;&#x6210;&#x4EE5;&#x53CA;&#x5927;&#x5C0F;
                    w3c&#x6807;&#x51C6;&#x76D2;&#x5B50;&#xFF1A;
                          content+padding+border+margin
                          css&#x91CC;&#x9762;&#x8BBE;&#x7F6E;&#x7684;height&#xFF0C;widht&#x4EE3;&#x8868;&#x7684;content&#x5BBD;&#x9AD8;&#xFF0C;&#x4E0D;&#x5305;&#x62EC;padding&#x3001;border&#x4EE5;&#x53CA;margin&#xFF0C;
                            &#x5982;&#x679C;&#x60F3;&#x8981;widht&#x3001;height&#x7684;&#x5BBD;&#x9AD8;&#x4EE3;&#x8868;content+padding+border&#x8FD9;&#x4E09;&#x5757;&#x7684;&#x5BBD;&#x9AD8;&#xFF0C;&#x5E94;&#x8BE5;&#x8BBE;&#x7F6E;&#x4E00;&#x4E0B;css&#x5C5E;&#x6027;box-sizing&#xFF1A;border-box&#xFF1B;
                8.&#x6837;&#x5F0F;&#x7684;&#x4E09;&#x79CD;&#x5F15;&#x5165;&#xFF08;&#x884C;&#x5185;&#x6837;&#x5F0F;&#x3001;&#x9875;&#x5185;&#x5F15;&#x5165;&#x3001;&#x5916;&#x90E8;&#x5F15;&#x5165;&#xFF09;
                9.&#x5143;&#x7D20;&#x7684;&#x79CD;&#x7C7B;&#xFF1A;&#x884C;&#x5185;&#x5143;&#x7D20;&#x3001;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#xFF08;p&#xFF09;&#x3001;&#x884C;&#x5185;&#x5757;
                10.display&#xFF1A;&#x6539;&#x53D8;&#x5143;&#x7D20;&#x7684;&#x8868;&#x73B0;&#x5F62;&#x5F0F; block&#xFF0C;inline-block&#xFF0C;inline&#xFF0C;none
                        visibility&#xFF1A;hidden/visible&#xFF1B;
                11.background&#xFF1A;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x591A;&#x5C42;&#xFF0C;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x4F4D;&#x7F6E;&#xFF0C;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5927;&#x5C0F;&#xFF08;contain/cover&#xFF09;
                12.git&#x7684;&#x4F7F;&#x7528;
                      &#x7B2C;&#x4E00;&#x6B21;  git clone &#x9879;&#x76EE;&#x5730;&#x5740;
                      &#x4EE5;    &#x540E;   &#x56DB;&#x6B65;&#x8D70;
                13.&#x5E03;&#x5C40;&#xFF1A;&#x4E00;&#x5B9A;&#x662F;&#x4ECE;&#x5927;&#x5230;&#x5C0F;&#x5206;&#x5757;&#xFF0C;&#x591A;&#x5927;&#x4E2A;div&#x4F5C;&#x4E3A;&#x5BB9;&#x5668;&#x662F;&#x4E0D;&#x8981;&#x94B1;&#x7684;&#xFF0C;&#x5E03;&#x5C40;&#x53EF;&#x4EE5;&#x7528;&#x6D6E;&#x52A8;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x7528;inline-block&#x5B9E;&#x73B0;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x540C;&#x884C;&#x663E;&#x793A;&#xFF0C;&#x5404;&#x6709;&#x4F18;&#x7F3A;&#x70B9;&#xFF0C;&#x5176;&#x5B9E;&#x6BD4;&#x8F83;&#x5EFA;&#x8BAE;&#x7528;inline-block&#xFF1B;
</code></pre><h4 id="83-bootstrap-&#x6846;&#x67B6;">8.3 bootstrap &#x6846;&#x67B6;</h4>
<ul>
<li>&#x76F4;&#x63A5;&#x5F15;&#x7528;&#x522B;&#x4EBA;&#x5199;&#x597D;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x5FC5;&#x987B;&#x670D;&#x4ECE;&#x5B9A;&#x4E49;&#x597D;&#x7684;&#x89C4;&#x5219;<br>&#x5730;&#x5740;&#xFF1A;<a target="_blank" href="http://www.bootcss.com/">http://www.bootcss.com/</a></li>
</ul>
<pre><code>&lt;div class=&quot;container&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;&#xFF08;&#x9ED8;&#x8BA4;&#x6837;&#x5F0F;&#xFF09;Default&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;&#xFF08;&#x9996;&#x9009;&#x9879;&#xFF09;Primary&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;&#xFF08;&#x6210;&#x529F;&#xFF09;Success&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;&#xFF08;&#x4E00;&#x822C;&#x4FE1;&#x606F;&#xFF09;Info&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;&#xFF08;&#x8B66;&#x544A;&#xFF09;Warning&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;&#xFF08;&#x5371;&#x9669;&#xFF09;Danger&lt;/button&gt;

            &lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;&#xFF08;&#x94FE;&#x63A5;&#xFF09;Link&lt;/button&gt;
        &lt;/div&gt;
//        &#x5F15;&#x8FDB;bootstrap.css&#x6837;&#x5F0F;&#x624D;&#x80FD;&#x770B;&#x5230;&#x6548;&#x679C;
</code></pre><h4 id="84-&#x6805;&#x683C;&#x5316;">8.4 &#x6805;&#x683C;&#x5316;</h4>
<pre><code>   &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
                &lt;div class=&quot;col-xs-12 col-sm-6 col-md-3 col-lg-2&quot;&gt;.col-md-1&lt;/div&gt;
            &lt;/div&gt;
//            col-xs &#x79FB;&#x52A8;&#x7AEF;&#x663E;&#x793A;  &lt; 768px
//            col-sm &#x5E73;&#x677F;&#x663E;&#x793A;      &gt; 768px &lt; 991px
//            col-md PC&#x7AEF;&#x663E;&#x793A;      &gt; 991px &lt; 1200px
//            col-lg &#x8D85;&#x5927;&#x5C4F;&#x663E;&#x793A;    &gt; 1200px
</code></pre><h3 id="&#x7B2C;&#x4E5D;&#x8282;-&#x79FB;&#x52A8;&#x7AEF;">&#x7B2C;&#x4E5D;&#x8282; &#x79FB;&#x52A8;&#x7AEF;</h3>
<h4 id="91-viewport">9.1 viewport</h4>
<h5 id="911viewpoint&#xFF1A;&#x89C6;&#x53E3;&#xFF0C;&#x89C6;&#x7A97;">9.1.1viewPoint&#xFF1A;&#x89C6;&#x53E3;&#xFF0C;&#x89C6;&#x7A97;</h5>
<ul>
<li>1.&#x5E03;&#x5C40;&#x89C6;&#x53E3;&#xFF1A;&#x6D4F;&#x89C8;&#x5668;&#x663E;&#x793A;&#x5185;&#x5BB9;&#x7684;&#x89C6;&#x53E3;&#xFF0C;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4E00;&#x822C;&#x79FB;&#x52A8;&#x7AEF;&#x6D4F;&#x89C8;&#x89C6;&#x53E3;&#x5BBD;&#x4F1A;&#x6BD4;&#x5C4F;&#x5E55;&#x5BBD;&#x8981;&#x5927;,
&#x4E0D;&#x540C;&#x624B;&#x673A;&#x4F1A;&#x6709;&#x4E0D;&#x540C;&#x7684;&#x5E03;&#x5C40;&#x89C6;&#x53E3;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#xFF0C;&#x5E38;&#x89C1;&#x7684;&#x503C;&#x4E3A;<code>980px</code>,&#x53E6;&#x5916;&#x8FD8;&#x6709;<code>800px</code>,<code>1024px</code>;</li>
<li>2.&#x624B;&#x673A;&#x5C4F;&#x5E55;&#x89C6;&#x53E3;&#xFF1A;&#x8FD9;&#x4E2A;&#x5C31;&#x662F;&#x6307;&#x624B;&#x673A;&#x5C4F;&#x5E55;&#xFF01;<ul>
<li>a.&#x7269;&#x7406;&#x50CF;&#x7D20;&#xFF08;&#x8BBE;&#x5907;&#x50CF;&#x7D20;&#xFF09;&#x62FF;ip4&#x4E3E;&#x4F8B;&#xFF0C;&#x7269;&#x7406;&#x5206;&#x8FA8;&#x7387;&#x5C31;&#x662F;<code>640*960px</code>,&#xFF08;&#x4F46;&#x662F;&#x8FD9;&#x91CC;&#x8981;&#x6CE8;&#x610F;&#xFF0C;&#x8FD9;&#x91CC;&#x7684;<code>1px</code>&#x548C;<code>css</code>&#x91CC;&#x9762;&#x7684;<code>1px</code>&#x5E76;&#x4E0D;&#x5BF9;&#x7B49;&#xFF09;<br>&#x5C3A;&#x5BF8;&#x7684;&#x95EE;&#x9898;&#xFF1A;<br>&#x7EDD;&#x5BF9;&#x5C3A;&#x5BF8;&#xFF1A;&#xFF08;m&#xFF0C;cm&#xFF0C;mm&#xFF09;<br>&#x76F8;&#x5BF9;&#x5C3A;&#x5BF8;&#xFF1A;&#xFF08;px&#xFF09;   </li>
<li>b.&#x903B;&#x8F91;&#x50CF;&#x7D20;&#xFF1A;&#x8BF4;&#x7684;&#x5C31;&#x662F;&#x6211;&#x4EEC;&#x7A0B;&#x5E8F;&#x5458;&#x91CC;&#x9762;&#x8BBE;&#x7F6E;&#x7684;&#x50CF;&#x7D20;&#x5927;&#x5C0F;</li>
<li>c.ppi&#xFF1A;&#x50CF;&#x7D20;&#x5BC6;&#x5EA6;&#xFF0C;&#x6307;&#x624B;&#x673A;&#x5BF9;&#x89D2;&#x7EBF;&#x65B9;&#x5411;&#x4E0A;&#x6BCF;&#x82F1;&#x5BF8;&#x957F;&#x5EA6;&#x6240;&#x5305;&#x542B;&#x7684;&#x50CF;&#x7D20;&#x4E2A;&#x6570;&#xFF0C;
&#x8BA1;&#x7B97;&#x65B9;&#x6CD5;&#x662F;&#x6709;&#x5BBD;&#x9AD8;&#x65B9;&#x5411;&#x7684;&#x7269;&#x7406;&#x50CF;&#x7D20;&#xFF0C;&#x6839;&#x636E;&#x52FE;&#x80A1;&#x5B9A;&#x7406;&#x7B97;&#x51FA;&#x5BF9;&#x89D2;&#x7EBF;&#x65B9;&#x5411;&#x7684;&#x50CF;&#x7D20;&#x70B9;&#xFF0C;
&#x7136;&#x540E;&#x518D;&#x9664;&#x4EE5;&#x5C4F;&#x5E55;&#x5C3A;&#x5BF8;&#x5F97;&#x5230;</li>
</ul>
</li>
<li>3.&#x4E3A;&#x4E86;&#x4FDD;&#x8BC1;&#x826F;&#x597D;&#x7684;&#x4F53;&#x9A8C;&#xFF0C;&#x6709;&#x6CA1;&#x6709;&#x4E00;&#x79CD;&#x65B9;&#x6CD5;&#x628A;&#x5E03;&#x5C40;&#x89C6;&#x53E3;&#x8BBE;&#x7F6E;&#x4E3A;&#x4F55;&#x8BBE;&#x5907;&#x89C6;&#x53E3;&#x76F8;&#x540C;&#xFF1F;
&#x7B54;&#x6848;&#x5C31;&#x662F;&#x901A;&#x8FC7;<code>meta</code>&#x6807;&#x7B7E;&#x8BBE;&#x7F6E;<code>viewPoint</code><h5 id="912viewport&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x7684;&#x5C5E;&#x6027;">9.1.2viewport&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x7684;&#x5C5E;&#x6027;</h5>
</li>
<li>1.<code>width</code>&#xFF1A;&#x89C4;&#x5B9A;&#x89C6;&#x53E3;&#x7684;&#x5BBD;&#x5EA6;&#x503C;&#xFF0C;&#x63A5;&#x53D7;&#x6570;&#x5B57;&#xFF08;&#x4E0D;&#x8981;&#x5199;&#x6210;640px&#xFF09;&#x6216;&#x8005;&#x201C;device-width&#x201D;&#x5B57;&#x7B26;&#x4E32;</li>
<li>2.<code>initial-scale</code> &#x521D;&#x59CB;&#x7F29;&#x653E;&#x6BD4;&#x4F8B;&#xFF0C;&#x7B2C;&#x4E00;&#x6B21;&#x52A0;&#x8F7D;&#x65F6;&#x8FDB;&#x884C;&#x7684;&#x7F29;&#x653E;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x8BBE;&#x7F6E;&#xFF0C;&#x79FB;&#x52A8;&#x8BBE;&#x5907;&#x4F1A;&#x6839;&#x636E;&#x8BBE;&#x7F6E;&#x7684;width&#x8FDB;&#x884C;&#x81EA;&#x52A8;&#x7F29;&#x653E;&#xFF0C;&#x4EE5;&#x4FDD;&#x8BC1;&#x4E0D;&#x4F1A;&#x51FA;&#x73B0;&#x6EDA;&#x52A8;&#x6761;&#xFF1B;</li>
<li>3.<code>minimum-scale,maximum-scale</code> &#x6700;&#x5C0F;&#xFF0C;&#x6700;&#x5927;&#x7F29;&#x653E;&#x6BD4;&#x4F8B;</li>
<li>4.<code>user-scalable</code> &#x662F;&#x5426;&#x5141;&#x8BB8;&#x7528;&#x6237;&#x8FDB;&#x884C;&#x7F29;&#x653E;</li>
<li>5.<code>height</code> &#x89C4;&#x5B9A;&#x89C6;&#x53E3;&#x9AD8;&#x5EA6;&#x503C;&#xFF0C;&#x5F88;&#x5C11;&#x4F7F;&#x7528;   </li>
<li><code>viewport</code>&#x7684;&#x7B2C;&#x4E00;&#x79CD;&#x8BBE;&#x7F6E;&#x65B9;&#x6CD5;
<code>width=device-width</code>  <blockquote>
<p>&#x6B64;&#x65F6;<code>html&#xFF0C;body</code>&#x7684;&#x5BBD;&#x5EA6;&#x4F1A;&#x968F;&#x7740;&#x8BBE;&#x5907;&#x7684;&#x4E0D;&#x540C;&#x800C;&#x6539;&#x53D8;&#xFF1B;<br>&#x6240;&#x4EE5;&#xFF0C;&#x5982;&#x679C;&#x7ED9;&#x4E00;&#x4E2A;<code>div</code>&#x8BBE;&#x7F6E;&#x4E86;<code>320px</code>&#x7684;&#x5BBD;&#x5EA6;&#xFF0C;&#x5728;ip4&#xFF0C;5&#x4E0B;&#x9762;&#x4F1A;<br>&#x5168;&#x5C4F;&#x663E;&#x793A;&#xFF0C;&#x4F46;&#x5728;ip6&#x6216;&#x8005;&#x5176;&#x4ED6;&#x624B;&#x673A;&#x4E0A;&#x9762;&#x4E0D;&#x4E00;&#x5B9A;&#x4F1A;&#x5168;&#x5C4F;&#x663E;&#x793A;&#x7684;<br>&#x8FD9;&#x91CC;&#x6709;&#x4E00;&#x4E2A;&#x662F;&#x5F00;&#x53D1;&#x8005;&#x6BD4;&#x8F83;&#x6B23;&#x6170;&#x7684;&#x70B9;&#x662F;&#xFF1A;&#x867D;&#x7136;&#x624B;&#x673A;&#x5C4F;&#x5E55;&#x4E0D;&#x5168;&#x662F;<code>320px</code>&#xFF0C;&#x4F46;&#x57FA;&#x672C;&#x5DEE;&#x522B;&#x4E0D;&#x5927;&#xFF0C;<code>320-410px</code>&#x5DE6;&#x53F3;.  </p>
</blockquote>
</li>
</ul>
<p><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot; /&gt;</code></p>
<ul>
<li><code>viewport</code>&#x7684;&#x7B2C;&#x4E8C;&#x79CD;&#x8BBE;&#x7F6E;&#x65B9;&#x6CD5;
<code>width=640</code><blockquote>
<p>&#x6B64;&#x65F6;&#x7684;<code>width</code>&#x662F;&#x4E00;&#x4E2A;&#x5B9A;&#x503C;&#xFF0C;&#x4E00;&#x822C;&#x662F;&#x4ECE;&#x8BBE;&#x8BA1;&#x56FE;&#x62FF;&#x5230;&#x7684;&#x5BBD;&#x9AD8;&#x503C;
&#x4E3A;&#x4E86;&#x4FDD;&#x8BC1;&#x4E0D;&#x51FA;&#x73B0;&#x6EDA;&#x52A8;&#x6761;&#xFF0C;&#x4E0D;&#x8981;&#x8BBE;&#x7F6E;<code>initial-scale</code>
&#x8FD9;&#x79CD;&#x8BBE;&#x7F6E;&#x662F;&#x4E00;&#x79CD;&#x5B9A;&#x5BBD;&#x5E03;&#x5C40;&#x7684;&#x5199;&#x6CD5;</p>
</blockquote>
</li>
</ul>
<p><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=640,user-scalable=no&quot; /&gt;</code></p>
<h4 id="92-rem">9.2 rem</h4>
<ul>
<li><code>em</code>&#xFF1A;&#x4E5F;&#x662F;&#x4E00;&#x4E2A;&#x5355;&#x4F4D;&#xFF0C;<code>font-size&#xFF1A;1em</code>; <code>1em</code>&#x4EE3;&#x8868;1&#x500D;&#x7684;&#x7238;&#x7238;&#x7684;<code>font-size</code>&#x8BBE;&#x7F6E;&#x503C;</li>
<li><code>rem</code>&#x542B;&#x4E49;&#xFF1A;&#x5355;&#x4F4D;&#xFF0C;<code>1rem</code>&#x4EE3;&#x8868;1&#x500D;&#x7684;<code>HTML</code>&#x7684;<code>font-size</code>&#x8BBE;&#x7F6E;&#x503C;<h5 id="922rem&#x7684;&#x8BBE;&#x7F6E;">9.2.2rem&#x7684;&#x8BBE;&#x7F6E;</h5>
```css
//&#x628A;px&#x8F6C;&#x5316;&#x4E3A;rem&#x7684;&#x51FD;&#x6570;
@function r($px){
  @return $px/40*1rem;
}
.rem2{
  width: r(500);
  height: r(300);
  background: skyblue;
}</li>
</ul>
<p>//&#x518D;&#x628A;&#x914D;&#x5957;&#x7684;js&#x8C03;&#x7528;&#x8FDB;&#x6765;
```</p>
<h4 id="93-&#x5F39;&#x6027;&#x76D2;&#x5B50;-flexibe-box">9.3 &#x5F39;&#x6027;&#x76D2;&#x5B50; flexibe box</h4>
<p>&#x5F39;&#x6027;&#x76D2;&#x5B50;&#xFF1A;&#x53EA;&#x6709;&#x7ED9;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6DFB;&#x52A0;<mark><code>display&#xFF1A;flex</code></mark>;&#x5C5E;&#x6027;&#x65F6;&#x624D;&#x80FD;&#x5E94;&#x7528;&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x3002;<br>&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x5206;&#x4E3A;&#x4E3B;&#x8F74;&#xFF08;<mark><code>main axis</code></mark>&#xFF09;&#x548C;&#x4EA4;&#x53C9;&#x8F74;&#xFF08;<mark><code>cross axis</code></mark>&#xFF09;<br>&#x4E3B;&#x8F74;&#x5C31;&#x662F;&#x6211;&#x4EEC;&#x6570;&#x5B66;&#x4E0A;&#x7684;X&#x8F74;&#xFF0C;&#x4EA4;&#x53C9;&#x8F74;&#x5C31;&#x662F;Y&#x8F74;&#x3002;<br>&#x4E3B;&#x8F74;&#x7684;&#x5F00;&#x59CB;&#x4F4D;&#x7F6E;&#xFF08;&#x4E0E;&#x8FB9;&#x6846;&#x7684;&#x4EA4;&#x53C9;&#x70B9;&#xFF09;&#x53EB;&#x505A;<mark><code>main start</code></mark>&#xFF0C;&#x7ED3;&#x675F;&#x4F4D;&#x7F6E;&#x53EB;&#x505A;<mark><code>main end</code></mark>&#xFF1B;&#x4EA4;&#x53C9;&#x8F74;&#x7684;&#x5F00;&#x59CB;&#x4F4D;&#x7F6E;&#x53EB;&#x505A;<mark><code>ross start</code></mark>&#xFF0C;&#x7ED3;&#x675F;&#x4F4D;&#x7F6E;&#x53EB;&#x505A;<mark><code>cross end</code></mark>&#x3002;<br>&#x9879;&#x76EE;&#x9ED8;&#x8BA4;&#x6CBF;&#x4E3B;&#x8F74;&#x6392;&#x5217;&#x3002;&#x5355;&#x4E2A;&#x9879;&#x76EE;&#x5360;&#x636E;&#x7684;&#x4E3B;&#x8F74;&#x7A7A;&#x95F4;&#x53EB;&#x505A;<mark><code>main size</code></mark>&#xFF0C;&#x5360;&#x636E;&#x7684;&#x4EA4;&#x53C9;&#x8F74;&#x7A7A;&#x95F4;&#x53EB;&#x505A;<mark><code>cross size</code></mark><br>&#x5730;&#x5740;&#xFF1A;<a target="_blank" href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</a><br>&#x5F39;&#x6027;&#x76D2;&#x5B50;&#x5C5E;&#x6027;&#x5206;&#x4E3A;&#x7ED9;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x548C;&#x5B50;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x3002;<br>&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x53C8;&#x79F0;&#x4E3A;&quot;&#x5BB9;&#x5668;&quot;&#xFF0C;&#x5B50;&#x5143;&#x7D20;&#x53C8;&#x79F0;&#x4E3A;&quot;&#x9879;&#x76EE;&quot;&#x3002;  </p>
<h5 id="931-&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#x6709;&#xFF1A;">9.3.1 &#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#x6709;&#xFF1A;</h5>
<ul>
<li>1.<code>flex-direction</code>    &#x4F5C;&#x7528;&#x4E8E;&#x5B50;&#x5143;&#x7D20;&#xFF0C;&#x7ED9;&#x5B50;&#x5143;&#x7D20;&#x4E00;&#x4E2A;&#x6392;&#x5217;&#x65B9;&#x5F0F;&#x3002;<ul>
<li><code>row</code>&#xFF1A;&#x4ECE;&#x5DE6;&#x5230;&#x53F3;&#x6392;&#x5217;&#xFF08;&#x9ED8;&#x8BA4;&#x503C;&#xFF09;</li>
<li><code>row-reverse</code>:&#x4ECE;&#x53F3;&#x5230;&#x5DE6;&#x6392;&#x5217;</li>
<li><code>column</code>:&#x4ECE;&#x4E0A;&#x5230;&#x4E0B;&#x6392;&#x5217;</li>
<li><code>column-reverse</code>&#xFF1A;&#x4ECE;&#x4E0B;&#x5230;&#x4E0A;&#x6392;&#x5217;</li>
</ul>
</li>
<li><p>2.<code>flex-wrap</code>    &#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x6362;&#x884C;&#x7684;&#x5C5E;&#x6027;</p>
<ul>
<li><code>nowrap</code>:&#x4E00;&#x884C;&#x663E;&#x793A;&#xFF08;&#x9ED8;&#x8BA4;&#xFF09;</li>
<li><code>wrap</code>&#xFF1A;&#x8D85;&#x51FA;&#x5BB9;&#x5668;&#x90E8;&#x5206;&#x6362;&#x884C;&#x663E;&#x793A;</li>
<li><code>wrap-reverse</code>&#xFF1A;&#x5012;&#x5E8F;&#x6362;&#x884C;&#x6392;&#x5217;</li>
</ul>
</li>
<li><p>3.<code>fle-flow</code>&#xFF1A;&#x662F;<code>flex-direction</code>&#x548C;<code>flex-wrap</code>&#x7684;&#x7B80;&#x5199;&#x5F62;&#x5F0F;</p>
<ul>
<li><code>flex-direction</code>&#x548C;<code>flex-wrap</code>&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x90FD;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;</li>
<li>&#x9ED8;&#x8BA4;&#x503C;&#xFF1A;<code>flex-flow: row nowrap</code>;</li>
</ul>
</li>
<li><p>4.<code>justify-content</code>    &#x5B9A;&#x4E49;&#x5728;&#x4E3B;&#x8F74;&#x4E0A;&#x7684;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;</p>
<ul>
<li><code>flex-start</code>&#xFF1A;&#x5DE6;&#x5BF9;&#x9F50;</li>
<li><code>flex-end</code>&#xFF1A;&#x53F3;&#x5BF9;&#x9F50;</li>
<li><code>center</code>&#xFF1A;&#x5DE6;&#x53F3;&#x5C45;&#x4E2D;</li>
<li><code>space-between</code>&#xFF1A;&#x5DE6;&#x53F3;&#x4E24;&#x8FB9;&#x5BF9;&#x9F50;</li>
<li><code>space-around</code>&#xFF1A;&#x5404;&#x884C;&#x5728;&#x5F39;&#x6027;&#x76D2;&#x5BB9;&#x5668;&#x4E2D;&#x5E73;&#x5747;&#x5206;&#x5E03;&#xFF0C;&#x4E24;&#x7AEF;&#x4FDD;&#x7559;&#x5B50;&#x5143;&#x7D20;&#x4E4B;&#x95F4;&#x95F4;&#x8DDD;&#x5927;&#x5C0F;&#x7684;&#x4E00;&#x534A;</li>
</ul>
</li>
<li><p>5.<code>align-items</code>    &#x5B9A;&#x4E49;&#x5728;&#x4EA4;&#x53C9;&#x8F74;&#x4E0A;&#x7684;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;</p>
<ul>
<li><code>flex-start</code>&#xFF1A;  &#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x5728;&#x9876;&#x90E8;&#x5BF9;&#x9F50;</li>
<li><code>flex-end</code>&#xFF1A;&#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x5728;&#x5E95;&#x90E8;&#x5BF9;&#x9F50;</li>
<li><code>center</code>&#xFF1A;&#x8BBE;&#x7F6E;&#x60F3;&#x9879;&#x76EE;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</li>
<li><code>baseline</code>&#xFF1A;&#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x5DF2;&#x6587;&#x5B57;&#x57FA;&#x7EBF;&#x4E3A;&#x5BF9;&#x9F50;&#x6C34;&#x5E73;&#x7EBF;&#x3002;</li>
<li><code>stretch</code>&#xFF1A;&#x5982;&#x679C;&#x6307;&#x5B9A;&#x4FA7;&#x8F74;&#x5927;&#x5C0F;&#x7684;&#x5C5E;&#x6027;&#x503C;&#x4E3A;<code>&apos;auto&apos;</code>&#xFF0C;&#x5219;&#x5176;&#x503C;&#x4F1A;&#x4F7F;&#x9879;&#x76EE;&#x7684;&#x8FB9;&#x8DDD;&#x76D2;&#x7684;&#x5C3A;&#x5BF8;&#x5C3D;&#x53EF;&#x80FD;&#x63A5;&#x8FD1;&#x6240;&#x5728;&#x884C;&#x7684;&#x5C3A;&#x5BF8;&#x3002;</li>
</ul>
</li>
<li><p>6.<code>align-content</code>    &#x5B9A;&#x4E49;&#x591A;&#x8DDF;&#x4EA4;&#x53C9;&#x8F74;&#x7EBF;&#x7684;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#xFF0C;&#x53EA;&#x6709;&#x4E00;&#x6839;&#x4EA4;&#x53C9;&#x8F74;&#x65F6;&#xFF0C;&#x6539;&#x5C5E;&#x6027;&#x4E0D;&#x8D77;&#x4F5C;&#x7528;   </p>
<pre><code>  &#xFF08;&#x4E5F;&#x5C31;&#x662F;&#x628A;&#x5B50;&#x5143;&#x7D20;&#x5F53;&#x505A;&#x4E00;&#x4E2A;&#x6574;&#x4F53;&#x8FDB;&#x884C;&#x4E00;&#x4E2A;&#x5BF9;&#x9F50;&#xFF0C;&#x5B50;&#x5143;&#x7D20;&#x4E4B;&#x95F4;&#x7684;&#x8DDD;&#x79BB;&#x4E0D;&#x4F1A;&#x6539;&#x53D8;&#xFF09;
</code></pre><ul>
<li><code>flex-start</code>&#xFF1A;  &#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x5728;&#x9876;&#x90E8;&#x5BF9;&#x9F50;</li>
<li><code>flex-end</code>&#xFF1A;&#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x5728;&#x5E95;&#x90E8;&#x5BF9;&#x9F50;</li>
<li><code>center</code>&#xFF1A;&#x8BBE;&#x7F6E;&#x60F3;&#x9879;&#x76EE;&#x5782;&#x76F4;&#x5C45;&#x4E2D;</li>
<li><code>baseline</code>&#xFF1A;&#x8BBE;&#x7F6E;&#x9879;&#x76EE;&#x5DF2;&#x6587;&#x5B57;&#x57FA;&#x7EBF;&#x4E3A;&#x5BF9;&#x9F50;&#x6C34;&#x5E73;&#x7EBF;&#x3002;</li>
<li><code>stretch</code>&#xFF1A;&#x5982;&#x679C;&#x6307;&#x5B9A;&#x4FA7;&#x8F74;&#x5927;&#x5C0F;&#x7684;&#x5C5E;&#x6027;&#x503C;&#x4E3A;<code>&apos;auto&apos;</code>&#xFF0C;&#x5219;&#x5176;&#x503C;&#x4F1A;&#x4F7F;&#x9879;&#x76EE;&#x7684;&#x8FB9;&#x8DDD;&#x76D2;&#x7684;&#x5C3A;&#x5BF8;&#x5C3D;&#x53EF;&#x80FD;&#x63A5;&#x8FD1;&#x6240;&#x5728;&#x884C;&#x7684;&#x5C3A;&#x5BF8;&#x3002;</li>
</ul>
</li>
</ul>
<h5 id="932-&#x7ED9;&#x5B50;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;">9.3.2 &#x7ED9;&#x5B50;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;</h5>
<ul>
<li>1.<code>order</code>    &#x7ED9;&#x5B50;&#x5143;&#x7D20;&#x4E00;&#x4E2A;&#x6392;&#x5217;&#x5173;&#x7CFB;&#xFF0C;&#x9ED8;&#x8BA4;&#x4E3A;0,&#xFF0C;&#x6570;&#x503C;&#x8D8A;&#x5927;&#xFF08;&#x5141;&#x8BB8;&#x8D1F;&#x6570;&#xFF09;&#xFF0C;&#x6392;&#x5217;&#x8D8A;&#x9760;&#x540E;&#x3002;</li>
<li>2.<code>flex-grow</code>    &#x5B9A;&#x4E49;&#x653E;&#x5927;&#x6BD4;&#x4F8B; &#xFF0C;&#x9ED8;&#x8BA4;&#x503C;&#x4E3A;0.&#xFF08;&#x4E0D;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#xFF0C;&#x4E0D;&#x5206;&#x914D;&#xFF09;</li>
<li>3.<code>flex-shrin</code>k &#x5B9A;&#x4E49;&#x9879;&#x76EE;&#x7F29;&#x5C0F;&#x6BD4;&#x4F8B;&#xFF0C;&#x9ED8;&#x8BA4;&#x503C;&#x4E3A;1.&#xFF08;&#x4E0D;&#x8BBE;&#x7F6E;&#x6B64;&#x5C5E;&#x6027;&#xFF0C;&#x5E73;&#x5747;&#x7F29;&#x5C0F;&#x6BD4;&#x4F8B;&#xFF09;</li>
<li>4.<code>flex-basis</code>&#xFF1A;&#x5B9A;&#x4E49;&#x5728;&#x5206;&#x914D;&#x540E;&#x591A;&#x4F59;&#x7A7A;&#x95F4;&#x4E4B;&#x95F4;&#xFF0C;&#x9879;&#x76EE;&#x5360;&#x636E;&#x7684;&#x4E3B;&#x8F74;&#x7A7A;&#x95F4;</li>
<li>5.<code>flex</code>&#xFF1A;&#x7B26;&#x5408;&#x5C5E;&#x6027;,<code>flex-grow</code>,<code>flex-shrink</code>,<code>flex-basis</code></li>
<li>6.<code>align-self</code>&#xFF1A;&#x5141;&#x8BB8;&#x5355;&#x4E2A;&#x9879;&#x76EE;&#x4E0E;&#x9879;&#x76EE;&#x4E0D;&#x4E00;&#x6837;&#x7684;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;&#xFF0C;&#x9ED8;&#x8BA4;<code>auto</code>&#xFF0C;&#x8868;&#x793A;&#x7EE7;&#x7EED;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x7684;<code>align-items</code>&#x5C5E;&#x6027;&#xFF0C;&#x5982;&#x679C;&#x7236;&#x7EA7;&#x5143;&#x7D20;&#x6CA1;&#x6709;&#x8BBE;&#x7F6E;<code>align-items</code>&#x5219;&#x8BA1;&#x7B97;&#x503C;&#x4E3A;<code>&apos;stretch&apos;</code>.</li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../../md/html/HTML5.html" class="navigation navigation-prev " aria-label="Previous page: HTML介绍"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../../md/js/js基础.html" class="navigation navigation-next " aria-label="Next page: JavaScript"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../../gitbook/app.js"></script>

    
    <script src="../../gitbook/plugins/gitbook-plugin-expandable-chapters-interactive/expandable-chapters.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

    
    <script src="../../gitbook/plugins/gitbook-plugin-livereload/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"expandable-chapters-interactive":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
